import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:gourmet/extensions/ex_widget.dart';
import 'package:gourmet/route/index.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/styles.dart';
import 'package:gourmet/utils/svg.dart';
import 'package:gourmet/utils/tools.dart';

class HomeMineController extends GetxController {
  late ScrollController scrollController;

  RxDouble opacity = RxDouble(0.0);

  final double bgHeight = 150.0;

  late Rx<SystemUiOverlayStyle> systemUiOverlayStyle;

  @override
  void onInit() {
    systemUiOverlayStyle = Rx(SystemUiOverlayStyle.light);
    scrollController = ScrollController()
      ..addListener(() {
        if (scrollController.offset <= 0) {
          opacity.value = 0;
        } else {
          opacity.value =
              (scrollController.offset / bgHeight).toDouble().clamp(0.0, 1.0);
        }
        changeColor();
      });
    super.onInit();
  }

  @override
  void onReady() {
    changeColor();
    super.onReady();
  }

  void changeColor() {
    if (scrollController.offset < 1) {
      /// 白色
      systemUiOverlayStyle.value = SystemUiOverlayStyle.light;
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    } else {
      /// 黑色
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
      systemUiOverlayStyle.value = SystemUiOverlayStyle.dark;
    }
  }

  @override
  void onClose() {
    scrollController.dispose();
    super.onClose();
  }
}

class HomeMineView extends GetView<HomeMineController> {
  const HomeMineView({super.key});

  @override
  Widget build(BuildContext context) {
    return buildStatusColor(context);
  }

  Widget buildStatusColor(BuildContext context) {
    return Obx(
      () => AnnotatedRegion<SystemUiOverlayStyle>(
        value: controller.systemUiOverlayStyle.value,
        child: CustomScrollView(
          controller: controller.scrollController,
          slivers: [
            SliverAppBar(
              automaticallyImplyLeading: false,
              pinned: true,
              actions: [
                IconButton(
                  onPressed: () {
                    Get.toNamed(Routes.mineSetting);
                  },
                  icon: Icon(
                    Icons.settings,
                    size: 20.w,
                    weight: 700,
                    color: controller.opacity > 0
                        ? Colors.black.withOpacity(controller.opacity.value)
                        : Colors.white,
                  ),
                ),
              ],
              expandedHeight: 200,
              backgroundColor:
                  Colors.white.withOpacity(controller.opacity.value),
              flexibleSpace: FlexibleSpaceBar(
                background: Stack(
                  children: [
                    Container(
                      height: controller.bgHeight,
                      alignment: Alignment.bottomCenter,
                      // MediaQueryData.fromView(WidgetsBinding.instance.platformDispatcher.views.first).padding.top
                      padding: EdgeInsets.only(top: Get.mediaQuery.padding.top),
                      decoration: BoxDecoration(
                        image: DecorationImage(
                            image: ToolsUtils.assetImage(
                              'u7709.png',
                            ),
                            fit: BoxFit.cover,
                            alignment: Alignment.topLeft),
                      ),
                      child: Container(
                        alignment: Alignment.centerLeft,
                        padding: EdgeInsets.only(bottom: 35, left: 20.w),
                        child: Wrap(
                          spacing: 15,
                          crossAxisAlignment: WrapCrossAlignment.center,
                          alignment: WrapAlignment.start,
                          children: [
                            CircleAvatar(
                              radius: 30.r,
                              backgroundImage: const NetworkImage(
                                  'https://img0.baidu.com/it/u=3059338894,2334870186&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'),
                            ),
                            Text.rich(
                              TextSpan(
                                children: [
                                  TextSpan(
                                    text: '小默先生 ',
                                    style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize18,
                                    ),
                                  ),
                                  WidgetSpan(
                                      child: Icon(
                                        Icons.arrow_forward_ios,
                                        color: ColorsUtils.rgba(
                                            255, 255, 255, 0.6),
                                        size: 14.w,
                                      ),
                                      alignment: PlaceholderAlignment.middle)
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Positioned(
                      bottom: 0,
                      left: 0,
                      right: 0,
                      child: Center(
                        child: Container(
                          constraints: const BoxConstraints.expand(
                              width: 345, height: 80),
                          decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(10.r)),
                          child: Row(
                            children: [
                              Expanded(
                                child: GestureDetector(
                                  onTap: () {
                                    Get.toNamed(Routes.mineWallet);
                                  },
                                  child: Column(
                                    children: [
                                      Container(
                                        margin: const EdgeInsets.only(top: 10),
                                        alignment: Alignment.center,
                                        child: SvgUtils.assetName('u440',
                                            width: 22.w, height: 22.w),
                                      ),
                                      Container(
                                        margin: const EdgeInsets.only(top: 5),
                                        alignment: Alignment.center,
                                        child: Text(
                                          '我的钱包',
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color0000,
                                              fontSize: StylesUtils.fontSize13),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              Expanded(
                                child: GestureDetector(
                                  onTap: () {
                                    Get.toNamed(Routes.mineRedEnvelope);
                                  },
                                  child: Column(
                                    children: [
                                      Container(
                                        margin: const EdgeInsets.only(top: 10),
                                        alignment: Alignment.center,
                                        child: Text(
                                          '3',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize18,
                                              fontWeight: FontWeight.w700,
                                              color: ColorsUtils.colorFf64),
                                        ),
                                      ),
                                      Container(
                                        margin: const EdgeInsets.only(top: 5),
                                        alignment: Alignment.center,
                                        child: Text(
                                          '红包',
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color0000,
                                              fontSize: StylesUtils.fontSize13),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              Expanded(
                                child: GestureDetector(
                                  onTap: () {
                                    Get.toNamed(Routes.mineMerchantVoucher);
                                  },
                                  child: Column(
                                    children: [
                                      Container(
                                        margin: const EdgeInsets.only(top: 10),
                                        alignment: Alignment.center,
                                        child: Text(
                                          '5',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize18,
                                              fontWeight: FontWeight.w700,
                                              color: ColorsUtils.colorFf64),
                                        ),
                                      ),
                                      Container(
                                        margin: const EdgeInsets.only(top: 5),
                                        alignment: Alignment.center,
                                        child: Text(
                                          '代金券',
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color0000,
                                              fontSize: StylesUtils.fontSize13),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              Expanded(
                                child: Column(
                                  children: [
                                    Container(
                                      margin: const EdgeInsets.only(top: 10),
                                      alignment: Alignment.center,
                                      child: SvgUtils.assetName('u450',
                                          width: 17.w, height: 20.w),
                                    ),
                                    Container(
                                      margin: const EdgeInsets.only(top: 5),
                                      alignment: Alignment.center,
                                      child: Text(
                                        '支付账单',
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color0000,
                                            fontSize: StylesUtils.fontSize13),
                                      ),
                                    ),
                                  ],
                                ).onTap(() {
                                  Get.toNamed(Routes.minePaymentBill);
                                }),
                              ),
                            ],
                          ),
                        ),
                      ),
                    )
                  ],
                ),
                title: Opacity(
                  opacity: controller.opacity.value,
                  child: Container(
                    padding: EdgeInsets.only(
                        left: 20, top: Get.mediaQuery.padding.top),
                    alignment: Alignment.centerLeft,
                    child: Text.rich(
                      TextSpan(
                        children: [
                          TextSpan(
                            text: '小默先生',
                            style: StylesUtils.textStyle(
                                fontSize: StylesUtils.fontSize18,
                                color: ColorsUtils.rgba(
                                    0, 0, 0, controller.opacity.value)),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
            SliverPadding(
              padding: const EdgeInsets.only(top: 10),
              sliver: SliverToBoxAdapter(
                child: Center(
                  child: Container(
                    constraints:
                        const BoxConstraints.expand(width: 345, height: 220),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10.r),
                    ),
                    child: Column(
                      children: [
                        Container(
                          padding: const EdgeInsets.only(
                              top: 15, left: 15, right: 2, bottom: 2),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '功能服务',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color0000,
                                fontWeight: FontWeight.w700,
                                fontSize: StylesUtils.fontSize18),
                          ),
                        ),
                        GridView.count(
                          crossAxisCount: 4,
                          primary: true,
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          padding: const EdgeInsets.only(top: 15),
                          mainAxisSpacing: 15,
                          childAspectRatio: 1.35,
                          children: [
                            Column(
                              children: [
                                Center(
                                  child: SvgUtils.assetName('u455',
                                      width: 28.w, height: 24),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '我的收藏',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333,
                                        fontSize: StylesUtils.fontSize13),
                                  ),
                                ),
                              ],
                            ).onTap(() {
                              Get.toNamed(Routes.mineCollect);
                            }),
                            Column(
                              children: [
                                Center(
                                  child: SvgUtils.assetName('u458',
                                      width: 28.w, height: 28),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '我的足迹',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333,
                                        fontSize: StylesUtils.fontSize13),
                                  ),
                                ),
                              ],
                            ).onTap(() {
                              Get.toNamed(Routes.mineFootprint);
                            }),
                            Column(
                              children: [
                                Center(
                                  child: SvgUtils.assetName('u461',
                                      width: 26.w, height: 28),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '我的评价',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333,
                                        fontSize: StylesUtils.fontSize13),
                                  ),
                                ),
                              ],
                            ).onTap(() {
                              Get.toNamed(Routes.mineEvalute);
                            }),
                            Column(
                              children: [
                                Center(
                                  child: SvgUtils.assetName('u464',
                                      width: 27.w, height: 28),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '收货地址',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333,
                                        fontSize: StylesUtils.fontSize13),
                                  ),
                                ),
                              ],
                            ).onTap(() {
                              Get.toNamed(Routes.mineReceiveAddressManage);
                            }),
                            Column(
                              children: [
                                Center(
                                  child: SvgUtils.assetName('u467',
                                      width: 28.w, height: 28),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '发票助手',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333,
                                        fontSize: StylesUtils.fontSize13),
                                  ),
                                ),
                              ],
                            ).onTap(() {
                              Get.toNamed(Routes.invoiceAssistant);
                            }),
                            Column(
                              children: [
                                Center(
                                  child: SvgUtils.assetName('u470',
                                      width: 28.w, height: 28),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '客服与帮助',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333,
                                        fontSize: StylesUtils.fontSize13),
                                  ),
                                )
                              ],
                            ).onTap(() {
                              Get.toNamed(Routes.helpService);
                            }),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
            SliverPadding(
              padding: const EdgeInsets.only(top: 10),
              sliver: SliverToBoxAdapter(
                child: Center(
                  child: Container(
                    constraints:
                        const BoxConstraints.expand(width: 345, height: 135),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(10.r)),
                    child: Column(
                      children: [
                        Container(
                          padding: const EdgeInsets.only(
                              top: 15, left: 15, right: 2, bottom: 2),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '更多推荐',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color0000,
                                fontWeight: FontWeight.w700,
                                fontSize: StylesUtils.fontSize18),
                          ),
                        ),
                        GridView.count(
                          crossAxisCount: 4,
                          primary: true,
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          padding: const EdgeInsets.only(top: 15),
                          mainAxisSpacing: 15,
                          childAspectRatio: 1.35,
                          children: [
                            Column(
                              children: [
                                Center(
                                  child: SvgUtils.assetName('u473',
                                      width: 28.w, height: 28),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '邀请有奖',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333,
                                        fontSize: StylesUtils.fontSize13),
                                  ),
                                ),
                              ],
                            ).onTap(() {
                              Get.toNamed(Routes.invitePrizes);
                            }),
                            Column(
                              children: [
                                Center(
                                  child: SvgUtils.assetName('u476',
                                      width: 28.w, height: 26),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '商家开店',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333,
                                        fontSize: StylesUtils.fontSize13),
                                  ),
                                ),
                              ],
                            ).onTap(() {
                              Get.toNamed(Routes.storeOpen);
                            }),
                            Column(
                              children: [
                                Center(
                                  child: SvgUtils.assetName('u479',
                                      width: 30.w, height: 24),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '骑手招募',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333,
                                        fontSize: StylesUtils.fontSize13),
                                  ),
                                ),
                              ],
                            ).onTap(() {
                              Get.toNamed(Routes.recruitRider);
                            }),
                            Column(
                              children: [
                                Center(
                                  child: SvgUtils.assetName('u482',
                                      width: 28.w, height: 28),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '同城跑腿',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333,
                                        fontSize: StylesUtils.fontSize13),
                                  ),
                                ),
                              ],
                            ).onTap(() {
                              Get.toNamed(Routes.localErrand);
                            }),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
